<template>
  <div class="page-details">
    <c-title :hide="false" text="订单详情"></c-title>
    <div class="page-bg">
      <div class="header">
        <div class="head-succees flex-a-c flex-j-c " v-if="details.status === 3">
          <div class="succees">{{ details.status_name }}</div>
          <div class="prompt">感谢购买，期待再次光临</div>
        </div>
        <div class="head-title" v-else-if="refundId && details.status !== -1">售后中</div>
        <div class="head-succees flex-a-c flex-j-c " v-else-if="details.status === -1 && details.pay_time !== '1970-01-01 08:00:00'">
          <div class="succees">退款成功</div>
          <div class="prompt">钱款已原路退回</div>
        </div>
        <div class="head-title" v-else>{{ details.status_name }}</div>

        <div class="order-item">
          <div class="card-wrap flex">
            <div class="img">
              <img :src="goodsDetail.thumb" />
            </div>
            <div class="card-main flex">
              <div class="flex-j-sb ">
                <div class="title ell">{{ goodsDetail.title }}</div>
              </div>
              <div class="flex-a-c attribute">
                <div class="num">购买数量：{{ goodsDetail.total }}件</div>
                <div class="price">商品金额：¥{{ goodsDetail.price }}</div>
              </div>
            </div>
          </div>
          <div class="card-footer flex-j-sb">
            <div class="title">到店付</div>
            <div class="price">
              ¥<span>{{ couponStore.offline_price }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mb20"></div>
    <div class="details-qrcode flex-j-c flex-a-c" v-if="(details.status === 1 && refundId === 0 && (!client && !clientType)) || details.status === 2">
      <div class="qrcode-img">
        <img :src="couponCode.code_url" />
      </div>
      <div class="order-buy" @click="refreshCode"><text class="iconfont icon-fontclass-gengxin"></text>刷新</div>
      <div class="eqcode-title">请将二维码展示给店铺</div>
      <div class="eqcode-btn">核销后请向门店付款 ¥{{ couponStore.offline_price }}</div>
    </div>
    <div class="mb18" v-if="details.status !== 0"></div>

    <div class="apply-refund flex-j-sb" v-if="(details.status === 1 && refundId === 0) || details.status === 2">
      <div v-if="couponList.length > 0">
        <div class="explain flex-a-c" @click="onQrcode">{{ couponList.length }}份可用{{ usableCoupon.length }}次·查看券码<text class="iconfont icon-advertise-next"></text></div>
        <div class="expire-time">{{ couponList[0] && couponList[0].expire_time }}后到期</div>
      </div>
      <div class="apply-ex">
        <block v-for="(item, index) in details.button_models" :key="index">
          <div class="refund-btn" @click="refundBtn" v-if="item.value === 'coupon_store_refund_page'">
            申请退款
          </div>
        </block>
      </div>
    </div>

    <div class="afterSale flex-j-sb flex-a-c" v-if="refundId && details.status !== -1">
      <div class="afterSale-title">售后中·{{ goodsDetail.total }}份</div>
      <div @click="afterSaleBtn" class="flex-a-c" v-if="!client &&  !clientType">
        <span>查看详情</span>
        <div class="iconfont icon-advertise-next"></div>
      </div>
    </div>
    <div class="afterSale flex-j-sb flex-a-c" v-if="refundId && details.status === -1 && details.pay_time !== '1970-01-01 08:00:00'">
      <div class="afterSale-title">已退款·{{ goodsDetail.total }}份</div>
      <div @click="afterSaleBtn" class="flex-a-c" v-if="!client &&  !clientType">
        <span>查看详情</span>
        <div class="iconfont icon-advertise-next"></div>
      </div>
    </div>

    <div class="hint flex" v-if="details.status !== 0 && refundId === 0 && details.status !== 3">
      <div class="img">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/hint.png" />
      </div>
      <span>为保障您的权益，请按实际消费情况确认核销券数；为防止被骗，未到店消费前请不要将券码或二维码等核销码提供给商家</span>
    </div>

    <div class="afterSale flex-j-sb flex-a-c" v-if="details.status === 3">
      <div class="afterSale-title">已使用·{{ couponList.length }}份</div>
      <div @click="onQrcode" class="flex-a-c" v-if="!client &&  !clientType">
        <span>查看详情</span>
        <div class="iconfont icon-advertise-next"></div>
      </div>
    </div>

    <div class="shop" v-if="details.status !== 0 && (!client && !clientType)">
      <div class="shop-title flex-j-sb ">
        <div class="title-name">适用门店</div>
        <div class="flex-a-c amount" @click="shopNavTo">{{ total }}家店适用<span class="iconfont icon-advertise-next"></span></div>
      </div>
      <address-us :storeItem="storeListByGoods[0]" :address="addressDetail" :isImg="imageRight"></address-us>
    </div>
    <div class="mb20"></div>
    <div>
      <purchase-notes
        :goodsNotes="couponStore.store_goods && couponStore.store_goods.buy_notice"
        :goodsDetail="couponStore.store_goods && couponStore.store_goods.package_detail"
        :noticeDesc="couponStore.notice_desc"
        :priceDesc="couponStore.price_desc"
        :pluginSetting="pluginSetting"
      >
      </purchase-notes>
    </div>

    <div class="mb20"></div>
    <div class="orderInfo">
      <div class="title">订单信息</div>
      <div class="flex-j-sb info-item">
        <div class="info-left">订单号</div>
        <div class="info-right info-sn" v-clipboard:copy="details.order_sn" v-clipboard:success="copyCode" v-clipboard:error="onError">
          {{ details.order_sn }}<img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/copy.png" class="copy" />
        </div>
      </div>
      <div class="flex-j-sb info-item">
        <div class="info-left">下单时间</div>
        <div class="info-right">{{ details.create_time }}</div>
      </div>
      <div class="info-pb">
        <div class="info-line"></div>
      </div>
      <div class="flex-j-sb info-item">
        <div class="info-left">购买份数</div>
        <div class="info-right">{{ details.goods_total }}份</div>
      </div>
      <div class="flex-j-sb info-item">
        <div class="info-left">订单金额</div>
        <div class="info-right">¥{{ details.goods_price }}</div>
      </div>
      <div class="flex-j-sb info-item">
        <div class="info-left">优惠金额</div>
        <div class="info-right">¥{{ details.discount_price }}</div>
      </div>
      <div class="flex-j-sb info-item">
        <div class="info-left">实付金额</div>
        <div class="info-right">¥{{ details.price }}</div>
      </div>
    </div>
    <div class="mb20"></div>
    <div class="footer">
      <div class="flex-j-sb flex-a-c footer-service">
        <div class="service" @click="clickChat" :style="{'visibility': client || clientType?'hidden':'auto'}">
          <div class="iconfont icon-fontclass-kefu"></div>
          <div class="name">客服</div>
        </div>
        <div class="price-total flex">
          <div class="title">订单总额</div>
          <div class="price">
            ¥<span class="number">{{ details.price }}</span>
          </div>
        </div>
      </div>
      <block v-for="(item, index) in details.button_models" :key="index">
        <div class="evaluate-btn " v-if="item.value === 'coupon_store_comment'" @click="evaluateBtn(details.has_many_order_goods[0].title)">去评价</div>
      </block>
      <div v-if="details.status === 0" class="payment-btn flex-a-c flex-j-sb">
        <block v-for="(item, index) in details.button_models" :key="index">
          <div class="btn" :class="item.value === 1 ? 'pay' : ''" @click="orderstateOn({id:orderId,api:item.api,value:item.value})">
            {{ item.name }}
          </div>
        </block>
        <!-- <div class="btn pay">支付</div> -->
      </div>
      <div class="mb10"></div>
    </div>
    <van-dialog id="van-dialog" />
    <div class="mb130"></div>
    <div class="mb130"></div>
    <!-- 客服 -->
    <!-- 客服end -->
    <van-popup position="bottom" v-model="orderShow" @close="onClose">
      <div class="qrcode-main">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/down.png" class="down" @click="onClose" />
        <div class="title">详情</div>
        <div class="qrcode-list">
          <block v-for="(item, index) in couponList" :key="index">
            <div class="qrcode-item flex-a-c" v-if="item.status === 0" v-clipboard:copy="item.coupon_sn" v-clipboard:success="copyCode" v-clipboard:error="onError">
              <div class="ticket-sn">券号 {{ item.coupon_sn }}</div>
              <div class="use false">待使用</div>
              <div class="qrcode-copy">
                <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/qrcode-copy.png" />
              </div>
            </div>
            <div class="qrcode-item-confirm" v-else>
              <div class="flex-a-c">
                <div class="ticket-sn">
                  券号 <span class="ticket-text">{{ item.coupon_sn }}</span>
                </div>
                <div class="use true">已使用</div>
              </div>
              <div class="shop-name">消费门店：{{ item.has_one_store && item.has_one_store.store_name }}</div>
              <div class="ticket-time">{{ item.examine_time }}</div>
            </div>
          </block>
        </div>
      </div>
    </van-popup>
    <yz-service v-model="serviceShow" :url="cservice" :mobile="serviceMobile" :qr="serviceQRcode"></yz-service>
  </div>
</template>
<script>
import orderDetails_controller from "./orderDetails_controller.js";
export default orderDetails_controller;
</script>
<style scoped>
.page-details ::v-deep .van-nav-bar__content {
  background-color: #ff3a00;
}

.page-details ::v-deep .van-button {
  background-color: #ff3a00;
}

.page-details ::v-deep .van-nav-bar__title {
  color: #fff;
}

.page-details ::v-deep .van-nav-bar .van-icon {
  color: #fff;
}
</style>
<style lang="scss" scoped>
/* packageF/consumption/orderDetails/orderDetails.wxss */

.mb20 {
  height: 0.625rem;
  clear: both;
}

.mb10 {
  height: 0.3125rem;
  clear: both;
}

.mb120 {
  height: 7.5rem;
  clear: both;
}

.mb18 {
  height: 0.5625rem;
  clear: both;
}

.mb130 {
  height: 4.0625rem;
  clear: both;
}

.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* 定义显示的行数 */
  overflow: hidden;
}

.page-bg {
  background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/details_bg.png");
  background-size: 100% 70%;
  background-repeat: no-repeat;
}

.header {
  margin: 0 0.625rem;
}

.page-details .head-title {
  font-size: 1.4322rem;
  color: #fff;
  padding: 1.1875rem 0 1.0625rem 0;
  text-align: left;
}

.head-succees {
  padding: 0.9688rem 0 1.25rem 0;
  flex-direction: column;
  color: #fff;

  .succees {
    font-size: 1.0625rem;
  }

  .prompt {
    font-size: 0.8125rem;
    margin: 0.625rem 0 0 0;
  }
}

.order-item {
  background-color: #fff;
  border-radius: 0.3125rem;
  padding: 0.9375rem 0.8125rem 0.8125rem 0.8125rem;
}

.card-wrap .img {
  width: 3.9375rem;
  height: 3.9375rem;
  margin: 0 0.6875rem 0 0;

  img {
    width: 3.9375rem;
    height: 3.9375rem;
  }
}

.card-main {
  flex-direction: column;

  .name {
    font-size: 0.9116rem;
    color: #222;
  }

  .attribute {
    margin: 1.125rem 0 0 0;
    font-size: 0.7163rem;
    color: #979797;
  }
}

.attribute .num {
  margin: 0 1.9375rem 0 0;
}

.card-footer {
  margin: 1.0625rem 0 0 0;
  align-items: flex-end;

  .title {
    font-size: 0.9375rem;
    color: #222;
  }

  .price {
    font-size: 0.7163rem;
    color: #ff3a00;

    text {
      font-size: 1.0625rem;
    }
  }
}

/* 显示扫二维码 */

.details-qrcode {
  background-color: #fff;
  border-radius: 0.3125rem;
  margin: 0 0.625rem;
  padding: 2rem 0 1.0625rem 0;
  flex-direction: column;

  .qrcode-img {
    width: 7.9688rem;
    height: 7.9688rem;

    img {
      width: 7.9688rem;
      height: 7.9688rem;
    }
  }

  .eqcode-title {
    text-align: center;
    font-size: 0.8125rem;
    color: #979797;
    margin: 2.5rem 0 0 0;
  }

  .eqcode-btn {
    background-image: linear-gradient(90deg, #ff9566 0%, #fb6d43 100%);
    border-radius: 0.3125rem;
    font-size: 0.9375rem;
    color: #fff;
    margin: 0.6875rem 0 0 0;
    padding: 0.6875rem 1.375rem 0.625rem 1.375rem;
  }
}

.apply-refund {
  margin: 0 0.625rem 0.9375rem 0.625rem;
  border-radius: 0.3125rem;
  background-color: #fff;
  align-items: flex-end;
  padding: 0.9375rem 0.8125rem 0.875rem 0.8125rem;

  .explain {
    font-size: 1rem;
    color: #31303d;
    cursor: pointer;
  }

  .expire-time {
    font-size: 0.75rem;
    color: #888;
    margin: 0.1563rem 0 0 0;
  }

  .refund-btn {
    width: 5rem;
    height: 1.875rem;
    line-height: 1.875rem;
    text-align: center;
    border-radius: 0.125rem;
    font-size: 0.7813rem;
    color: #333;
    border: solid 0.0625rem #b5b5b5;
  }
}

.afterSale {
  background-color: #fff;
  margin: 0 0.625rem 0.625rem 0.625rem;
  border-radius: 0.3125rem;
  padding: 0.625rem;
}

.afterSale-title {
  font-size: 0.875rem;
}

.hint {
  margin: 0 1.375rem 0.9375rem 1.375rem;
  font-size: 0.7813rem;
  line-height: 1.375rem;
  color: #888;
  text-align: left;

  .img {
    width: 0.8125rem;
    height: 0.8125rem;
    margin: 0.1875rem 0.3125rem 0 0;
  }

  img {
    width: 0.8125rem;
    height: 0.8125rem;
    margin: 0 0.1563rem 0 0;
  }
}

/* 门店位置信息 */

.shop {
  margin: 0 0.625rem;
  background-color: #fff;
  padding: 0.75rem 0.8125rem 0.8125rem 0.6875rem;
  border-radius: 0.3125rem;
}

.shop-title {
  margin: 0 0 0.9375rem 0;

  .title-name {
    font-size: 1.0625rem;
    color: #222;
  }

  .amount {
    font-size: 0.75rem;
    color: #979797;
  }
}

/* 订单信息 */

.orderInfo {
  padding: 0.75rem 0.625rem 1.6563rem 0.625rem;
  margin: 0 0.625rem;
  border-radius: 0.3125rem;
  background-color: #fff;

  .title {
    font-size: 1.0625rem;
    color: #222;
    margin: 0 0 1.4063rem 0;
    text-align: left;
  }
}

.info-sn {
  cursor: pointer;
}

.info-right .copy {
  width: 0.7188rem;
  height: 0.7188rem;
  margin-left: 0.4063rem;
}

.info-item {
  font-size: 0.9375rem;
  margin: 0 0 1.0313rem 0;
}

.orderInfo {
  .left {
    color: #555;
  }

  .right {
    color: #222;
  }

  .info-pb {
    padding: 0 0.3125rem;
    margin: 0 0 1.0938rem 0;
  }
}

.info-pb .info-line {
  width: 100%;
  height: 0.0625rem;
  background-color: #cfcfcf;
}

.footer {
  // width: 100%;
  width: 23.4375rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  box-sizing: border-box;
}

.footer-service {
  padding: 0.875rem 1.7188rem 0.9375rem 1.4688rem;
}

.footer {
  .service {
    .icon-fontclass-kefu {
      font-size: 1.375rem;
    }

    .name {
      font-size: 0.75rem;
      color: #222;
    }
  }

  .price-total {
    font-size: 0.75rem;
    color: #555;
    align-items: flex-end;
  }
}

.price-total .title {
  margin-bottom: 0.4375rem;
}

.footer .price-total .price {
  color: #ff3a00;
  font-size: 0.9375rem;
  margin: 0 0 0 0.4688rem;
}

.price-total .number {
  font-size: 1.5625rem;
}

.footer .evaluate-btn {
  width: 21.875rem;
  height: 2.5rem;
  line-height: 2.5rem;
  margin: 1.5625rem auto 0.3125rem auto;
  text-align: center;
  background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
  border-radius: 0.3125rem;
  font-size: 0.9375rem;
  color: #fff;
}

/* 券码弹窗 */

.qrcode-main {
  padding: 1.0313rem 0.625rem 1.25rem 0.625rem;
  position: relative;
  border-radius: 0.3125rem;

  .title {
    font-size: 1.0625rem;
    color: #222;
    text-align: center;
    margin-bottom: 1.25rem;
  }

  .down {
    width: 1.3125rem;
    height: 1.3125rem;
    position: absolute;
    top: 0.9375rem;
    right: 0.9375rem;
  }

  .qrcode-item {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 0 0.7188rem;
    height: 2.3438rem;
    background-color: #f4f4f4;
    cursor: pointer;
  }
}

.qrcode-item .ticket-sn,
.qrcode-item-confirm .ticket-sn {
  font-size: 0.9375rem;
  color: #4d4c54;
}

.ticket-sn .ticket-text {
  text-decoration: line-through;
}

.qrcode-item {
  .qrcode-copy {
    width: 0.8125rem;
    height: 0.75rem;

    img {
      width: 0.8125rem;
      height: 0.75rem;
    }
  }

  .use {
    width: 2.5rem;
    height: 1.0625rem;
    line-height: 1.0625rem;
    text-align: center;
    background-color: #e2e2e2;
    font-size: 0.625rem;
    border-radius: 8rpx;
    margin: 0 0.4375rem 0 1.0625rem;
  }
}

.qrcode-item-confirm .use {
  width: 2.5rem;
  height: 1.0625rem;
  line-height: 1.0625rem;
  text-align: center;
  background-color: #e2e2e2;
  font-size: 0.625rem;
  border-radius: 8rpx;
  margin: 0 0.4375rem 0 1.0625rem;
}

.false {
  color: #7d7d7f;
}

.true {
  color: #ff3a00;
}

.qrcode-item {
  margin: 0 0 0.625rem 0;
  padding: 1.4063rem 0.6875rem 0.875rem 0.6875rem;
  background-color: #f4f4f4;
}

.qrcode-item-confirm {
  margin: 0 0 0.625rem 0;
  padding: 1.4063rem 0.6875rem 0.875rem 0.6875rem;
  background-color: #f4f4f4;

  .shop-name {
    font-size: 0.9375rem;
    color: #4d4c54;
    text-align: left;
    margin: 0.625rem 0 0 0;
  }

  .ticket-time {
    font-size: 0.8125rem;
    color: #4d4c54;
    margin: 0.625rem 0 0 0;
    text-align: left;
  }
}

.payment-btn {
  margin: 0 0.625rem 0.625rem 0.625rem;

  .btn {
    width: 10.5rem;
    height: 2.0625rem;
    line-height: 2.125rem;
    text-align: center;
    border-radius: 0.3125rem;
    border: solid 0.0313rem #b3b3b3;
    font-size: 0.8125rem;
    color: #222;
    margin: 0 0.375rem 0 0;
  }

  .pay {
    background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
    font-size: 0.8125rem;
    color: #fff;
  }
}

.order-buy {
  border: solid 0.0313rem #b3b3b3;
  font-size: 0.8125rem;
  color: #222;
  background-image: #fff;
  width: 5rem;
  height: 2.0625rem;
  line-height: 2.125rem;
  text-align: center;
  border-radius: 0.3125rem;

  .icon-fontclass-gengxin {
    font-size: 0.875rem;
    margin-right: 0.1563rem;
  }
}

.qrcode-list {
  height: 18.75rem;
  overflow-y: auto;
}

.service {
  position: relative;

  .service-btn {
    position: absolute;
    width: 1.1875rem;
    height: 3.75rem;
    background-color: transparent;
    border: none;
    z-index: 5;

    &::after {
      border: none;
    }
  }
}

.pop-content {
  background-color: #fff;
  border-radius: 1.1875rem;
  text-align: center;
  background: #fff;
  padding: 1.0938rem 0;
  position: relative;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20.3125rem;

  .pop-top {
    display: flex;
    justify-content: space-between;
    width: 100%;

    /* flex-wrap: wrap; */

    .left {
      flex: 1;
      display: flex;
      justify-content: center;
      position: relative;
      margin-bottom: 0.75rem;

      .wrap {
        display: flex;
        flex-direction: column;
        align-items: center;

        .image {
          width: 2.625rem;
          height: 2.625rem;
          margin: 0 auto;
          margin-bottom: 0.5rem;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .right {
      flex: 1;
      display: flex;
      justify-content: center;
      margin-bottom: 0.75rem;

      .wrap {
        display: flex;
        flex-direction: column;
        align-items: center;

        .image {
          width: 2.625rem;
          height: 2.625rem;
          margin: 0 auto;
          margin-bottom: 0.5rem;
        }

        icon {
          width: 2.625rem;
          height: 2.625rem;
          margin: 0 auto;
          margin-bottom: 0.5rem;
          border-radius: 50%;
          overflow: hidden;
          font-size: 1.5625rem;
          background-color: #02c777;
          color: #fff;
        }

        .color2 {
          background: #ff9329;
        }

        .color3 {
          background: #2aa7fb;
        }

        .image image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .line {
    width: 2rpx;
    height: 1.5938rem;
    background-color: #999;
  }
}
</style>
